<template>
  <div class="register">
    <h2>注册</h2>
    <div v-if="error" class="error-message">{{ error }}</div>
    <form @submit.prevent="handleRegister" class="register-form" :class="{ 'loading': isLoading }">
      <div class="form-item">
        <label>账号：</label>
        <input type="text" v-model="form.account" required />
      </div>
      <div class="form-item">
        <label>密码：</label>
        <input type="password" v-model="form.password" required />
        <password-strength :password="form.password" />
      </div>
      <div class="form-item">
        <label>确认密码：</label>
        <input type="password" v-model="confirmPassword" required />
      </div>
      <div class="form-item">
        <label>昵称：</label>
        <input type="text" v-model="form.name" required />
      </div>
      <div class="form-actions">
        <button type="submit" class="btn-register" :disabled="isLoading">
          <loading-spinner v-if="isLoading" text="注册中..." />
          <span v-else>注册</span>
        </button>
        <router-link to="/login" class="btn-login" :class="{ 'disabled': isLoading }">返回登录</router-link>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { register } from '../api/user'
import LoadingSpinner from '../components/LoadingSpinner.vue'
import PasswordStrength from '../components/PasswordStrength.vue'

const router = useRouter()
const form = ref({
  account: '',
  password: '',
  name: ''
})
const confirmPassword = ref('')
const error = ref('')
const isLoading = ref(false)

const validateForm = () => {
  if (!form.value.account) {
    error.value = '请输入账号'
    return false
  }
  if (form.value.account.length < 3) {
    error.value = '账号至少需要3个字符'
    return false
  }
  if (!form.value.password) {
    error.value = '请输入密码'
    return false
  }
  if (form.value.password.length < 6) {
    error.value = '密码至少需要6个字符'
    return false
  }
  if (form.value.password !== confirmPassword.value) {
    error.value = '两次输入的密码不一致'
    return false
  }
  if (!form.value.name) {
    error.value = '请输入昵称'
    return false
  }
  return true
}

const handleRegister = async () => {
  if (isLoading.value) return
  error.value = ''
  
  if (!validateForm()) {
    return
  }

  isLoading.value = true
  try {
    await register({
      account: form.value.account,
      password: form.value.password,
      name: form.value.name
    })
    alert('注册成功')
    router.push('/login')
  } catch (err) {
    console.error('Register error:', err)
    error.value = '注册失败，该账号可能已被注册'
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
.register {
  max-width: 400px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-actions {
  display: flex;
  gap: 10px;
}

.btn-register, .btn-login {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}

.btn-register {
  background-color: #1e88e5;
  color: white;
  border: none;
}

.btn-login {
  background-color: #f5f5f5;
  color: #333;
}

.error-message {
  color: #f44336;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #ffebee;
  border-radius: 4px;
  font-size: 14px;
}

.loading {
  opacity: 0.7;
  pointer-events: none;
}

.disabled {
  opacity: 0.5;
  pointer-events: none;
}
</style> 